<template>
  <el-page-header @back="goBack" title="返回">
    <template #content>
      <span class="text-large font-600 mr-3">配装详情</span>
    </template>
  </el-page-header>
  <el-skeleton style="width: 100%;height: 100%;" :loading="!loading" animated>
    <template #template>
      <el-row justify="center" style="margin-top: 30px;width: 100%;height: 100%;">
        <el-skeleton-item variant="image" style="width: 1800px; height: 900px"/>
      </el-row>
    </template>
  </el-skeleton>
  <el-row id="image" justify="center" style="margin-top: 30px;width: 100%;height: 100%;"></el-row>

  <el-row style="position: absolute;left: -9999px;top: -9999px" id="imageHtml">
    <el-row style="background-image: url('/equipment-ico/equipment_build_bg.jpg');width: 1500px;border-radius:10px;justify-content: center;display: grid;background-size: cover">
      <el-row style="display: flex">
        <el-row style="display: flex;margin: 10px;flex:1">
          <el-row style="padding-left: 20px;align-items: center;width: 100%;background:#ffffff;opacity: 0.9;border-radius: 10px;">
            <el-row :style="{backgroundImage:getClassImage(detailData?.buildClass)}" style="width: 50px;height: 50px;background-size: cover"/>
            <el-text style="font-size: 25px;margin-left: 20px;flex: 1">《{{ detailData?.buildName }}》</el-text>
            <el-text>作者：</el-text>
            <el-text>{{ author }}</el-text>
            <el-row style="margin:0 20px;align-items: center;" class="author-label">
              <el-text>职业：</el-text>
              <el-tag :type="getClassTagType(detailData?.buildClass)">{{ detailData?.buildClass }}</el-tag>
              <el-tag type="info" class="school-tag" style="margin-left: 10px">{{ detailData?.buildSchool }}</el-tag>
            </el-row>
          </el-row>
          <el-row style="display: flex;width: 100%;margin-top:10px;">
            <el-row style="display:grid;align-items: center;background:#ffffff;opacity: 0.9;border-radius: 10px" justify="start">
              <el-row style="display: grid;border-radius: 10px;padding: 10px;height: 100%">
                <el-text>
                  法宝：{{ detailData?.talisman?.name || '无' }}
                  <el-text v-show="detailData?.talisman?.criticalStrike>0">[{{ detailData?.talisman?.criticalStrike }}会心]</el-text>
                  <el-text v-show="detailData?.talisman?.recovery>0">[{{ detailData?.talisman?.recovery }}调息]</el-text>
                  <el-text v-show="detailData?.talisman?.expertise>0">[{{ detailData?.talisman?.expertise }}专精]</el-text>
                  <el-text v-show="detailData?.talisman?.armorPenetration>0">[{{ detailData?.talisman?.armorPenetration }}破甲]</el-text>
                  <el-text v-show="detailData?.talisman?.accuracy>0">[{{ detailData?.talisman?.accuracy }}命中]</el-text>
                  等级：{{ detailData?.talismanLevelAttribute.level }}
                </el-text>
                <el-text>
                  天书：
                  <el-text v-show="detailData?.skillTree?.criticalStrike>0">[会心：{{ detailData?.skillTree?.criticalStrike }}%]</el-text>
                  <el-text v-show="detailData?.skillTree?.recovery>0">[调息：{{ detailData?.skillTree?.recovery }}%]</el-text>
                  <el-text v-show="detailData?.skillTree?.expertise>0">[专精：{{ detailData?.skillTree?.expertise }}%]</el-text>
                  <el-text v-show="detailData?.skillTree?.defense>0">[防御：{{ detailData?.skillTree?.defense }}%]</el-text>
                  <el-text v-show="detailData?.skillTree?.hp>0">[气血：{{ detailData?.skillTree?.hp }}%]</el-text>
                  <el-text v-show="detailData?.skillTree?.criticalStrike===0&&detailData?.skillTree?.recovery
            ===0&&detailData?.skillTree?.expertise===0&&detailData?.skillTree?.defense===0&&detailData?.skillTree?.hp===0">无
                  </el-text>
                </el-text>
              </el-row>
              <el-row style="height: 100%;display: grid;align-items: center;border-radius: 10px;padding: 10px" justify="start">
                <el-row v-for="(item,key) in detailData?.starSpirit" :key="item" style="display: flex">
                  <el-text>{{ key }}：</el-text>
                  <el-text>{{ item.level }}级、</el-text>
                  <el-text>{{ item.coreAttribute }}核心、</el-text>
                  <el-text>{{ item.HP }}气血、</el-text>
                  <el-text v-show="key==='青龙'">{{ item.attribute * 3 }}会心</el-text>
                  <el-text v-show="key==='白虎'">{{ item.attribute * 3 }}调息</el-text>
                  <el-text v-show="key==='玄武'">{{ item.attribute * 3 }}破甲</el-text>
                  <el-text v-show="key==='朱雀'">{{ item.attribute * 3 }}专精</el-text>
                </el-row>
              </el-row>
            </el-row>
            <el-row style="min-width: 400px;padding: 10px;border-radius: 10px;flex: 1;margin-left:10px;background:#ffffff;opacity: 0.9">
              <el-row style="flex: 0.7;display: grid;color:#333333">
                <el-text>体 : {{ result?.constitution.toFixed(0) }}</el-text>
                <el-text>气血 : {{ result?.hp?.toFixed(0) }}</el-text>
                <el-text>核心属性 : {{ result?.coreAttribute.toFixed(0) }}</el-text>
                <el-text>物理攻击 : {{ (result?.coreAttribute / 5).toFixed(0) }}</el-text>
                <el-text>魔法攻击 : {{ (result?.coreAttribute / 5).toFixed(0) }}</el-text>
              </el-row>
              <el-row style="flex: 1;display: grid">
                <el-row>
                  <el-text style="color: #333333;width: 80px">会心 : {{ result?.criticalStrike?.toFixed(0) }}</el-text>
                  <el-text>({{ (result?.criticalStrike / 39 + detailData?.skillTree.criticalStrike).toFixed(2) }}%)</el-text>
                </el-row>
                <el-row>
                  <el-text style="color: #333333;width: 80px">调息 : {{ result?.recovery?.toFixed(0) }}</el-text>
                  <el-text>({{ (result?.recovery / 39 + detailData?.skillTree.recovery).toFixed(2) }}%)</el-text>
                </el-row>
                <el-row>
                  <el-text style="color: #333333;width: 80px">专精 : {{ result?.expertise?.toFixed(0) }}</el-text>
                  <el-text>({{ (result?.expertise / 39 + detailData?.skillTree.expertise).toFixed(2) }}%)</el-text>
                </el-row>
                <el-row>
                  <el-text style="color: #333333;width: 80px">破甲 : {{ result?.armorPenetration?.toFixed(0) }}</el-text>
                  <el-text>({{ (result?.armorPenetration / 39).toFixed(2) }}%)</el-text>
                </el-row>
                <el-row>
                  <el-text style="color: #333333;width: 80px">命中 : {{ result?.accuracy?.toFixed(0) }}</el-text>
                  <el-text>({{ (result?.accuracy / 39 + 100).toFixed(2) }}%)</el-text>
                </el-row>
              </el-row>
              <el-row style="flex: 0.7;display: grid">
                <el-text style="color: #333333">物理防御 : {{ result?.physicalDefense }}</el-text>
                <el-text style="color: #333333">魔法防御 : {{ result?.magicDefense }}</el-text>
              </el-row>
            </el-row>
          </el-row>
          <el-row style="margin-top: 10px;display: flex;flex: 1">
            <!--        套装-->
            <el-row style="flex:1;padding: 10px;background:#ffffff;opacity: 0.9;border-radius: 10px">
              <el-row style="display: grid" v-show="suitOther>=1">
                <el-text style="width: 100%;font-size: 20px;text-align: center">其他套装</el-text>
                <el-text :style="{color: suitOther >= 2 ? 'chocolate' : '#aaaaaa'}">2：会心、专精、调息和破甲属性中最高和最低值每相差100点，造成的伤害和治疗增加0.1%</el-text>
              </el-row>
              <el-row style="display: grid;align-content: start" v-show="suitNumber315>=2">
                <el-text style="width: 100%;font-size: 20px;text-align: center">305套装</el-text>
                <el-text :style="{color: suitNumber315 >= 2 ? 'chocolate' : '#aaaaaa'}">2：核心属性增加180点</el-text>
                <el-text :style="{color: suitNumber315 >= 4 ? 'chocolate' : '#aaaaaa'}">4：最高的额外属性（会心、专精、调息、破甲）增加195点</el-text>
              </el-row>
              <el-row style="display: grid;align-content: start;flex: 1" v-show="suitSize1>=2 || suitSize2>=2">
                <el-text style="width: 100%;font-size: 20px;text-align: center;">325套装</el-text>
                <el-row style="display: flex;flex-flow: row" v-show="suitSize1>=2">
                  <el-row style="flex:1;display: grid;">
                    <el-text v-show="suitSize1>=2" :style="{color: suitSize1 >= 2 ? 'chocolate' : '#aaaaaa'}">{{ suitAttribute1[0] }}</el-text>
                    <el-text v-show="suitSize1>=2" :style="{color: suitSize1 >= 4 ? 'chocolate' : '#aaaaaa'}">{{ suitAttribute1[1] }}</el-text>
                  </el-row>
                </el-row>
                <el-row style="display: flex;flex-flow: row;margin-top: 5px" v-show="suitSize2>=2">
                  <el-row style="flex:1;display: grid;">
                    <el-text v-show="suitSize2>=2" :style="{color: suitSize2 >= 2 ? 'chocolate' : '#aaaaaa'}">{{ suitAttribute2[0] }}</el-text>
                    <el-text v-show="suitSize2>=2" :style="{color: suitSize2 >= 4 ? 'chocolate' : '#aaaaaa'}">{{ suitAttribute2[1] }}</el-text>
                  </el-row>
                </el-row>
              </el-row>
            </el-row>
            <!--       特殊效果-->
            <el-row style="flex:1;padding: 10px;margin-left: 10px;display: grid;background:#ffffff;opacity: 0.9;border-radius: 10px;align-content: start">
              <el-text style="width: 100%;font-size: 20px;text-align: center">特殊效果</el-text>
              <el-text v-for="item in specialAttribute" :key="item.type" style="color: chocolate;">{{ item.type + "：" + item.content }}</el-text>
              <el-text v-for="item in sunMoonStarResult" :key="item" style="color: green;">{{ item }}</el-text>
              <el-text v-show="specialAttribute.length===0&&sunMoonStarResult.length===0">无</el-text>
            </el-row>
          </el-row>
        </el-row>
        <el-row style="padding: 10px 10px 10px 0;margin-top: -10px;min-width: 700px;display: grid">
          <el-row v-for="(item,index) in detailData?.equipments" :key="item.id"
                  style="width: 100%;background:#ffffff;opacity: 0.9;border-radius: 10px;margin-top: 10px;">
            <el-row style="display: flex;width: 100%;align-items: center;padding: 0 10px">
              <el-row style="width: 65px;height:65px;margin: 3px;background: #333333" :style="{backgroundImage: getPartImage(item.equipmentSlot)}"/>
              <el-row style="display: grid;margin-left: 10px;min-width: 200px">
                <el-text style="line-height:20px;color:#333333;font-size: 20px;">
                  {{ item.equipmentName.split('（')[0] }}
                  <el-text style="color: red" v-show="detailData?.setFusion[index]!==null&&detailData?.setFusion[index]!==undefined&&item.equipmentSource?.indexOf('套装')===-1">赋能：{{ detailData?.setFusion[index]?.name }}</el-text>
                  <el-text style="color: red" v-show="detailData?.charmSetFusion[index]!==null&&detailData?.charmSetFusion[index]!==undefined">赋能：{{ detailData?.charmSetFusion[index]?.name }}</el-text>
                </el-text>
                <el-row style="display: flex;margin-top: 15px">
                  <el-text style="line-height:20px;width: 80px;color:#333333" v-show="item.criticalStrike>0">会心：{{ item.criticalStrike }}</el-text>
                  <el-text style="line-height:20px;width: 80px;color:#333333" v-show="item.recovery>0">调息：{{ item.recovery }}</el-text>
                  <el-text style="line-height:20px;width: 80px;color:#333333" v-show="item.expertise>0">专精：{{ item.expertise }}</el-text>
                  <el-text style="line-height:20px;width: 80px;color:#333333" v-show="item.armorPenetration>0">破甲：{{ item.armorPenetration }}</el-text>
                  <el-text style="line-height:20px;width: 80px;color:#333333" v-show="item.accuracy>0">命中：{{ item.accuracy }}</el-text>
                  <el-text style="line-height:20px;width: 80px;color:#333333" v-show="item?.isRandom===1">
                    {{ index === 6 ? (randomAttribute1['6']?.name + '：' + randomAttribute1['6']?.value) : index === 7 ? (randomAttribute1['7']?.name + '：' + randomAttribute1['7']?.value) : '' }}
                  </el-text>
                  <el-text style="line-height:20px;width: 80px;color:#333333" v-show="item?.isRandom===1">
                    {{ index === 6 ? (randomAttribute2['6']?.name + '：' + randomAttribute2['6']?.value) : index === 7 ? (randomAttribute2['7']?.name + '：' + randomAttribute2['7']?.value) : '' }}
                  </el-text>
                </el-row>
              </el-row>
              <el-text style="flex: 1;color: chocolate">

              </el-text>
              <el-row style="display: flex">
                <el-row style="display: grid;margin: 0 20px;min-width: 90px">
                  <el-row v-show="index === 1" style="display: flex">
                    <el-row v-for="item in detailData?.inlays" :key="item.id" v-show="item.partType===1"
                            style="width: 30px;height: 30px;background-size: cover"
                            :style="{backgroundImage:getInlay1(item.description)}"/>
                  </el-row>
                  <el-row v-show="index === 2" style="display: flex">
                    <el-row v-for="item in detailData?.inlays" :key="item.id" v-show="item.partType===2"
                            style="width: 30px;height: 30px;background-size: cover"
                            :style="{backgroundImage:getInlay2(item.description)}"/>
                  </el-row>
                  <el-row v-show="index === 3" style="display: flex">
                    <el-row v-for="item in detailData?.inlays" :key="item.id" v-show="item.partType===3"
                            style="width: 30px;height: 30px;background-size: cover"
                            :style="{backgroundImage:getInlay3(item.description)}"/>
                  </el-row>
                  <el-row v-show="index === 4" style="display: flex">
                    <el-row v-for="item in detailData?.inlays" :key="item.id" v-show="item.partType===4"
                            style="width: 30px;height: 30px;background-size: cover"
                            :style="{backgroundImage:getInlay3(item.description)}"/>
                  </el-row>
                </el-row>
                <el-row style="display: grid;margin-left: 30px;min-width: 70px">
                  <el-row v-show="index > 0&&index < 6" style="min-width: 70px">
                    <el-row v-show="((335-item.qualityLevel)/10)>0">
                      <el-row style="background-image: url('/part-ico/armorEnhanced.png');background-size: cover;width: 30px;height: 30px"/>
                      <el-text style="margin-left: 5px">x{{ (335 - item.qualityLevel) / 10 }}次</el-text>
                    </el-row>
                  </el-row>
                  <el-row v-show="index >= 6" style="min-width: 70px">
                    <el-row v-show="item.loongSpiritUpgradeCount>0">
                      <el-row style="background-image: url('/part-ico/loongSpirit.png');background-size: cover;width: 30px;height: 30px"/>
                      <el-text style="margin-left: 5px">x{{ item.loongSpiritUpgradeCount }}次</el-text>
                    </el-row>
                  </el-row>
                </el-row>
              </el-row>
            </el-row>
          </el-row>
        </el-row>
      </el-row>
      <el-row justify="end" style="flex: 1;margin-right: 20px;margin-bottom: 5px">
        <el-text style="color: white;font-size: 18px;font-family: inherit">
          数据来源：www.zxsjtools.cn
        </el-text>
        <el-text style="color: white;font-size: 18px;font-family: inherit;margin-left: 15px">
          QQ交流群：937677069
        </el-text>
      </el-row>
    </el-row>
  </el-row>

  <el-button type="primary" text class="like-button">
    <el-icon>
      <Pointer/>
    </el-icon>
    <!--    <span class="like-count">{{ selectedBuild.likeCountStatistics }}</span>-->
  </el-button>
</template>
<script>
import {equipmentBuildsDetail} from '@/assets/js/equipment-builds-detail.js'
import {Pointer} from '@element-plus/icons-vue'

export default {
  components: {Pointer},
  setup() {
    return {
      ...equipmentBuildsDetail()
    }
  }
}
</script>

<style scoped>
/*.el-text {
  font-size: 16px;
  font-family: 楷体
}*/
</style>